<template>
	<view class="signBox">
		<view class="wrap flex" style="height: 100vh;flex-direction: column;">
			<view class="">
				<view class="signBox-nav flex a-c " @click="back">
					<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
				</view>
				<view class="signBox-Toptitle flex f-d">
					<view class="">金币收益</view>
					<view class="">
						<text>61800</text>
						<text>金币</text>
					</view>
					<view class="">金币收益活动每天凌晨自动更新（兑换规则）</view>
				</view>
			</view>
			<view class="signBox-welfare">
				<view class="title">
					日常福利
				</view>
				<view class="dailywelfare">
					<view class="dailywelfare-list flex f-d">
						<template v-for="(item,index) in signList" >
							<view class="dailywelfare-list-item flex a-c" :key="index" @click="changeSign(item,index)">
								<view class="weilfare-left flex">
									<view class="yuan">
										<image src="../image/Group_20.png" mode="" v-if="index==0" ></image>
										<image src="../image/Group_21.png" mode="" v-else-if="index==1"></image>
										<image src="../image/Group_22.png" mode="" v-else></image>
									</view>
									<view class="flex f-d">
										<view class="flex a-c">
											<view class="item-title">{{item.name}}</view>
											<view class="item-jinbi">
												<image src="../image/xiaojinbi.png" mode="" style="width: 24rpx;height: 24rpx;margin-right: 5rpx;"></image>
												200金币
											</view>
										</view>
										<view class="item-lianxu">{{item.desc}}</view>
									</view>
								</view>
								<view class="weilfare-right">{{item.btnText}}</view>
							</view>
						</template>
					</view>
					<view class="dailywelfare-fangka flex a-c">
						 <template v-for="(item,index) in 4">
							 <view class="dailywelfare-fangka-item flex f-d"  :key="index" :class="[index==0?'dailywelactive':'']">
							 	<text>翻千位</text>
							 	<image src="../image/Group_28.png" mode="" v-if="index==0"></image>
								<image src="../image/Group_31.png" mode="" v-else></image>
							 </view>
						 </template>
					</view>
					<view class="dailywelfare-watchvideo flex">
						<view class="flex">
							<view class="watchvideo-radio">
								<image src="../image/Group_35.png" mode=""></image>
								<!-- <u-checkbox-group
								    iconColor="red"
									iconSize="20"
								    shape="circle"
								    v-model="checked">
									<u-checkbox label=""></u-checkbox>
								</u-checkbox-group> -->
							</view>
							<view class="flex f-d">
								<view class="flex">
									<view class="item-title">看视频赚海量金币</view>
									<view class="item-jinbi">
										<image src="../image/xiaojinbi.png" mode="" style="width: 24rpx;height: 24rpx;margin-right: 5rpx;"></image>
										600金币
									</view>
								</view>
								<view class="item-lianxu">本次观看视频获得600金币</view>
							</view>
						</view>
						<view class="dailywelfare-watchvideo-btn">立即领取</view>
					</view>
					<view class="dailywelfare-steps flex f-d">
						<view class="flex a-c" style="justify-content: space-between;">
							<view class="dailywelfare-steps-tab flex a-c " v-for="(item,index) in 3" :class="[index==0?'setup-active':'']">
								<image src="../image/xiaojinbi.png" mode="" style="width: 24rpx;height: 24rpx;margin-right: 5rpx;"></image>
								再得200
							</view>
						</view>
						<u-steps current="1" activeIcon="checkmark" inactiveIcon="arrow-right" :dot="true" activeColor="#EE513F">
							<u-steps-item title="" desc="看1次视频"></u-steps-item>
							<u-steps-item title="" desc="看3次视频"></u-steps-item>
							<u-steps-item title="" desc="看5次视频"></u-steps-item>
						</u-steps>
					</view>
					<view class="dailywelfare-watchvideo flex">
						<view class="flex">
							<view class="watchvideo-radio">
								<image src="../image/Group_21.png" mode="" ></image>
							</view>
							<view class="flex f-d">
								<view class="item-title">邀请1人可得</view>
								<view class="item-lianxu">邀请好友参加</view>
							</view>
						</view>
						<view class="item-zhenqian">去赚钱</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 签到弹窗 -->
		<signPopup :signShow.sync="signShow"></signPopup>
		<!-- 翻出卡片弹窗 -->
		<cardPopup :cardShow.sync="cardShow"></cardPopup>
	</view>
</template>

<script>
	import signPopup from './components/signPopup.vue'
	import cardPopup from './components/cardPopup.vue'
	export default {
		components:{
			signPopup,
			cardPopup
		},
		data(){
			return {
				signShow:false,
				cardShow:false,
				signList:[
					{name:'每日签到',icon:'/static/images/1-001.png',desc:'已连续签到1天',btnText:'领红包'},
					{name:'金币红包雨',icon:'/pages/checkInads/image/Group_20.png',desc:'大量金币先到先得',btnText:'领红包'},
					{name:'翻卡赢金币',icon:'../image/Group_20.png', desc:'点击翻卡获得金币',btnText:'立即翻卡'},
				],
				checked:false,
			}
		},
		onLoad(){
			 // #ifdef APP-PLUS
			 window.android.jsInitGromore("1111")
			 // #endif
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			changeSign(item,index){
				if(index == 0){
					this.signShow = true
				}else if(index == 1){
					uni.navigateTo({
						url:'/pages/checkInads/signIn/redenvelope'
					})
				}else{
					this.cardShow = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-checkbox__icon-wrap {
		background-color: transparent !important;
		width: 42rpx !important;
		height: 42rpx !important;
		border: 0rpx !important;
		margin-left: 10rpx;
	}
	// /deep/ .u-icon__icon{
	// 	font-size: 30rpx !important;
	// }
	/deep/ .u-steps{
		.u-steps-item{
			&:nth-child(1){
				align-items: normal;
				margin-left: 60rpx;
			}
			.u-steps-item__line{
				left: 0px !important;
				width: 226rpx !important;
			}
			&:nth-child(2){
				align-items: normal;
				margin-left: 60rpx;
			}
			.u-steps-item__content{
				margin-left: -30rpx !important;
			}
			
		}
	}
	.setup-active{
		background-color: #ffdace !important;
	}
	.dailywelactive{
		background: linear-gradient( 40deg, #FFC27D 0%, #FF3407 100%) !important;
	}
	.watchvideo-radio{
		width: 44rpx;
		height: 44rpx;
		margin-right: 27rpx;
		image{
			width: 44rpx;
			height: 44rpx;
		}
		
	}
	.item-title{
		font-family: Inter, Inter;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		margin-right: 13rpx;
	}
	.item-jinbi{
		font-family: Inter, Inter;
		font-weight: 500;
		font-size: 28rpx;
		color: #FBB142;
	}
	.item-lianxu{
		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 24rpx;
		color: #7B7B7B;
		margin-top: 9rpx;
	}
	.item-zhenqian{
		background-image: url('../image/bai.png');
		width: 136rpx;
		height: 51rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		line-height: 51rpx;
		text-align: center;
		font-family: Inter, Inter;
		font-weight: 500;
		font-size: 26rpx;
		color: #F5F7FB;
	}
	.wrap{
		width: 690rpx;
		margin: 0 auto;
	}
	.flex{
		display: flex;
	}
	.a-c{
		align-items: center;
	}
	.f-d{
		flex-direction: column;
	}
	.signBox{
		// padding-bottom: 30rpx;
		
		width: 100%;
		box-sizing: border-box;
		background-image: url('../image/signBg.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		&-nav{
			height: 88rpx;
		}
		&-Toptitle{
			view{
				font-family: Inter, Inter;
				color: #FFFFFF;
				&:nth-child(1){
					font-weight: 500;
					font-size: 30rpx;
				}
				&:nth-child(2){
					font-weight: bold;
					font-size: 36rpx;
					margin: 5rpx 0rpx;
				}
				&:nth-child(3){
					font-size: 16rpx;
					color: #FFEDC9;
				}
			}
		}
		&-welfare{
			flex: 1;
			width: 100%;
			margin-bottom: 30rpx;
			background-image: url("../image/signwhite.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-top: 21rpx;
			.title{
				height: 100rpx;
				width: 100%;
				font-family: Inter, Inter;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 100rpx;
				margin-left: 36rpx;
			}
			.dailywelfare{
				width: 100%;
				background-color: #fff;
				padding: 0rpx 36rpx;
				.dailywelfare-list-item{
					margin-top: 30rpx;
					justify-content: space-between;
					.weilfare-left{
						.yuan{
							width: 44rpx;
							height: 44rpx;
							margin-right: 27rpx;
							image{
								width: 44rpx;
								height: 44rpx;
							}
						}
					}
					.weilfare-right{
						background-image: url('../image/bai.png');
						width: 136rpx;
						height: 51rpx;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						line-height: 51rpx;
						text-align: center;
						font-family: Inter, Inter;
						font-weight: 500;
						font-size: 26rpx;
						color: #F5F7FB;
					}
				}
				&-fangka{
					margin-top: 31rpx;
					margin-left: 100rpx;
					.dailywelfare-fangka-item{
						width: 96rpx;
						height: 126rpx;
						background: linear-gradient( 26deg, #FEE6CB 0%, #F17E14 72%);
						// background: linear-gradient( 40deg, #FFC27D 0%, #FF3407 100%);
						box-shadow: inset -2rpx 0rpx 4rpx 0rpx rgba(0,0,0,0.25);
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						margin-right: 32rpx;
						align-items: center;
						justify-content: space-evenly;
						text{
							font-family: Inter, Inter;
							font-weight: 500;
							font-size: 22rpx;
							color: #F5F7FB;
						}
						image{
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
				&-watchvideo{
					margin-top: 40rpx;
					justify-content: space-between;
					.dailywelfare-watchvideo-btn{
						width: 136rpx;
						height: 51rpx;
						background: linear-gradient( 180deg, #FFEDDA 0%, #FFADA4 100%);
						border-radius: 15rpx 15rpx 15rpx 15rpx;
						border: 2rpx solid #FFD2D0;
						line-height: 51rpx;
						text-align: center;
						font-family: Inter, Inter;
						font-weight: 500;
						font-size: 24rpx;
						color: #D34C25;
					}
				}
				&-steps{
				  margin-top: 41rpx;
				  .dailywelfare-steps-tab{
					  width: 157rpx;
					  height: 44rpx;
					  border-radius: 50rpx 50rpx 50rpx 50rpx;
					  border: 2rpx solid #EE513F;
					  line-height: 44rpx;
					  text-align: center;
					  font-family: Inter, Inter;
					  font-weight: 400;
					  font-size: 20rpx;
					  color: #FF5B44;
					  justify-content: center;
				  }
				}
			}
		}
	}
</style>